咒語:使用localstorge 在登入的時候 存取一個假token 記入使用帳號的ID 並且導向首頁

const handleLogin = async () => {
  try {
    const response = await fetch('http://localhost:3310/users', {
      method: 'GET',
    });

    if (response.status === 200) {
      const data = await response.json();
      const matchingUser = data.find((user) => user.email === email && user.password === password);

      if (matchingUser) {
        // 登入成功，獲取用戶的 ID
        const userId = matchingUser.id;

        // 將用戶的 ID 存儲到 localStorage 中，這裡假設 key 為 "token"
        localStorage.setItem('token', userId.toString());

        // 使用 useHistory 來導航到首頁
        const history = useHistory();
        history.push('/');

        alert('登入成功');
        // 可以在這裡執行登入後的操作
      } else {
        alert('登入失敗，請檢查帳號和密碼');
      }
    } else {
      alert('登入時出錯誤');
    }
  } catch (error) {
    console.error('登入時出錯:', error);
  }
};

const handleLogin = async () => {
  try {
    const response = await fetch('http://localhost:3310/users', {
      method: 'GET',
    });

    if (response.status === 200) {
      const data = await response.json();
      const matchingUser = data.find((user) => user.email === email && user.password === password);

      if (matchingUser) {
        // 登入成功，獲取用戶的 ID
        const userId = matchingUser.id;

        // 將用戶的 ID 存儲到 localStorage 中，這裡假設 key 為 "token"
        localStorage.setItem('token', userId.toString());

        // 使用 useHistory 來導航到首頁
        const history = useHistory();
        history.push('/');

        alert('登入成功');
        // 可以在這裡執行登入後的操作
      } else {
        alert('登入失敗，請檢查帳號和密碼');
      }
    } else {
      alert('登入時出錯誤');
    }
  } catch (error) {
    console.error('登入時出錯:', error);
  }
};

發現報錯了 仔細看了一下
新的導向好像不叫useHistory
更新咒語: 新的導向好像不叫useHistory

import { useNavigate } from 'react-router-dom';

const Login = () => {
   const navigate = useNavigate();

並且更改登入邏輯

const navigate = useNavigate();
navigate('/');

看起來還是有哪裡怪怪的
把APP links的code 複製下來更新需求

咒語:(


首頁


登入


商品介紹


購物車


根據localStorage的資訊 請幫我加上一個會員的link 大於0時會員連接出現 登入註冊連結消失 小於0或沒這個key值反之)

  <NavLinks>
      <ul>
        <li>
          <Link to="/">首頁</Link>
        </li>
        {token ? (
          // 如果 "token" 存在（用戶已登入），顯示會員連結
          <li>
            <Link to="/member">會員</Link>
          </li>
        ) : (
          // 如果 "token" 不存在（用戶未登入），顯示登入連結
          <li>
            <Link to="/login">登入</Link>
          </li>
        )}
        <li>
          <Link to="/product">商品介紹</Link>
        </li>
        <li>
          <Link to="/cart">購物車</Link>
        </li>
      </ul>
    </NavLinks>

就可以得到 登入過後 跳轉首頁的效果了